<template>
  <!-- vue2.0只能有一个根元素 -->
  <div>APP根组件
    <!-- 使用根模块state的数据 -->
    <p>{{$store.state.username}}</p>
    <!-- 使用根模块的计算属性getters -->
    <p>{{$store.getters['newName']}}</p>
    <button @click="modify"></button>
  </div>
</template>
<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup () {
    // 使用vuex的仓库
    const store = useStore()
    // 使用state的数据
    console.log(store.state.username)
    // getters
    console.log(store.getters.newName)
    // 提交根模块函数
    const modify = function () {
      store.commit('updateName')
    }
    return modify
  }
}
</script>
<style lang="less">

</style>
